<template>
	<view class="beijingse">
		<!-- 顶部 -->
		<view class="dingbbox flexcolumn">
			<view class="dabaitext">签到积分大派送 </view>
			<view class="margin_top xbtext" >今日签到可获得{{dataAll.score}}积分</view>
		</view>
		<view class="neirong">
			<view class="mainpadding">
				<view class="mainpadding ffffff radius flexbetween">
					<view class="wushi1 baibox youhx">
						<view class="flexcolumn">
							<view class="daheitext">{{Number(userInfo.score).toFixed(0)}}</view>
							<view class="huisetext textcenter">积分</view>
						</view>
					</view>
					<view class="wushi1 baibox">
						<view class="flexcolumn">
							<view class="daheitext">{{dataAll.sign_num}}</view>
							<view class="huisetext textcenter">签到天数</view>
						</view>
					</view>
				</view>
			</view>
			<ren-calendar ref='ren' :markDays='markDays' :headerBar='true' :collapsible="false"
				@onDayClick='onDayClick' @changeyue="changeyue"></ren-calendar>
		</view>
		<view class="mainpadding bott" >
			<!-- <view class="bigbtn submitbtn" @click="show=true">立即签到</view> -->
			<view class="bigbtn submitbtn" @click="qiandao" v-if="!dataAll.now_sign_status">立即签到</view>
			<view class="bigbtn submitbtn" style="background-color: #666666;" v-if="dataAll.now_sign_status">今日已签到</view>
		</view>

		<u-popup :show="show" @close="sure"  mode="center" :round="5" >
			<view class="flexcolumn mainpadding">
				<view class="popimage flexcenter">
					<image src="@/static/images/system/qdcg.png" mode=""></image>
				</view>
				<view class="margin_top titletext">签到成功，获得{{dataAll.score}}积分</view>
				<view class="bigbtn margin_top" @click="sure">确定</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				curDate: '',
				markDays: [],
				dataAll: {},
				show:false,
				userInfo:{}
			}
		},
		
		onReady() {
			let today = this.$refs.ren.getToday().date;
			this.curDate = today;
			this.getqdDay(today.slice(0,7))
		},
		onLoad() {
			this.init()
			
		},
		methods: {
			init() {
				httpRequest.request('/api/user/signData', 'POST', {}, false, false, true).then(res => {
					this.dataAll = res.data
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					this.userInfo = res.data
				})
			},
			sure(){
				this.init()
				this.show = false
			},
			qiandao() {
				uni.showLoading({
					title:"请稍后",
					mask:true,
				})
				httpRequest.request('/api/user/userSign', 'POST', {}, false, false, true).then(res => {
					if(res.code==1){
						this.show = true
					}else{
						httpRequest.toast(res.msg)
					}
					uni.hideLoading()
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			getqdDay(date){
				httpRequest.request('/api/user/getMouthDay', 'POST', {
					date
				}, false, false, true).then(res => {
					let arr = []
					res.data.forEach(item=>{
						if(item.sign_status){
							arr.push(item.date)
						}
					})
					this.markDays = arr
					console.log(this.markDays,"jinglei");
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			changeyue(e){
				this.getqdDay(e)
			},
			onDayClick(){
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bott{
		position: relative;
		top: -124rpx;
	}
	.neirong {
		position: relative;
		top: -124rpx;
	}

	.youhx {
		border-right: 2rpx solid #EFEFEF;
	}

	.wushi1 {
		width: 50%;
	}

	.huisetext {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(102, 102, 102, .6);
	}

	.daheitext {
		font-size: 72rpx;
		font-family: SourceHanSansCN;
		font-weight: bold;
		color: #ff7916;
	}

	.baibox {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
	}

	.xbtext {
		font-size: 33rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.dabaitext {
		font-size: 60rpx;
		font-family: zihun143-zhengkuchaojihei;
		font-weight: 400;
		color: #FFFFFF;
	}

	.dingbbox {
		background-size: 100% 100%;
		width: 100%;
		box-sizing: border-box;
		padding: 50rpx 30rpx 140rpx;
		background: linear-gradient(180deg, #ff7e20 0%, #ffb782 100%);
	}
	.popimage{
		width: 500rpx;
		image{
			width: 200rpx;
			height: 200rpx;
		}
	}
</style>
